<template>
  <!--告警发送策略-->
  <div class="Alarmsendingpolicy">
    <div class="alarmSearch">
      <alarm-search></alarm-search>
    </div>
    <div class="alarmTableList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        style="width: 100%;min-height:500px; "
        :header-cell-style="{background:'#D8DEE8',height: '20px',padding:'5px 0px'}"
      >
        <el-table-column type="selection" align="center" width="40"></el-table-column>

        <el-table-column
          type="index"
          label="序号"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="230px"
        >
          <template slot-scope="scope">
            <el-button class="tableIcon" title="查看" @click="showViewAlarm(scope.$index,scope.row)" type="text" size="small">
              <img :src="viewIcon"/>
            </el-button>
            <el-button class="tableIcon" title="编辑" @click="showupdateAlarm(scope.$index,scope.row)" type="text" size="small">
              <img :src="update"/>

            </el-button>
            <el-button class="tableIcon" title="删除" @click="open3(scope.$index, tableData)" type="text" size="small">
              <img :src="Delete"/>
            </el-button>
            <alarm-delete></alarm-delete>
            <span class="segmentingLine">|</span>
            <el-button @click="showUpdateMask(scope.$index,scope.row)" v-show="enabledState.enabled" class="tableIcon" title="启用" type="text" size="small">
              <img :src="enable"/>
            </el-button>
            <el-button @click="showUpdateMask(scope.$index,scope.row)" v-show="enabledState.disabled" class="tableIcon" title="禁用" type="text" size="small">
              <img :src="disable"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container footerPage">
        <el-pagination :current-page="ListQuery.page" :page-sizes="[5, 10, 20, 50]" :page-size="ListQuery.limit" background layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <view-alarm v-if="showAlarmMask" @giveFalse="viewdialogReturn"></view-alarm>
    <update-alarm v-if="showupdateAlarmMask" @giveFalse="updatedialogReturn"></update-alarm>
    <add-strategy></add-strategy>
  </div>
</template>
<script>
  import alarmSearch from './components/alarmSearch'
  import alarmDelete from './components/alarmDelete'
  import viewAlarm from './components/viewAlarm'
  import addStrategy from './components/addStrategy'
  import updateAlarm from './components/updateAlarm'

  import enable from '@/assets/mSiteAdmin/enable.png'
  import disable from '@/assets/mSiteAdmin/disable.png'
  import viewIcon from '@/assets/mSiteAdmin/viewIcon.png'
  import update from '@/assets/mSiteAdmin/update.png'
  import Delete from '@/assets/mSiteAdmin/delete.png'
  export default {
    name: 'AlarmSendingPolicy',
    components: { alarmSearch, alarmDelete, viewAlarm, addStrategy, updateAlarm },
    data() {
      return {
        enable,
        disable,
        viewIcon,
        update,
        Delete,
        showAlarmMask: false,
        showupdateAlarmMask: false,
        enabledState: {
          enabled: false,
          disabled: true
        },
        cols: [
          { prop: 'date', label: '策略名称', width: '200px', sortable: true },
          { prop: 'name', label: '设备&测点', width: '250px', sortable: true },
          { prop: 'name', label: '级别', width: '250px', sortable: true },
          { prop: 'name', label: '策略类型', width: '150px', sortable: true },
          { prop: 'name', label: '创建时间', width: '150px', sortable: true },
          { prop: 'name', label: '接收人', width: '150px', sortable: true },
          { prop: 'address', label: '状态' }
        ],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀',
          hello: '上海市普陀区'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }],
        edit: [{
          name: '',
          id: ''
        }],
        currentPage4: {
          page: 1
        },
        total: 0,
        ListQuery: {
          page: 1,
          limit: 20
        }
      }
    },
    methods: {
      showViewAlarm() {
        this.showAlarmMask = !this.showAlarmMask
      },
      viewdialogReturn(data) {
        this.showAlarmMask = data
      },
      showupdateAlarm() {
        this.showupdateAlarmMask = !this.showupdateAlarmMask
      },
      updatedialogReturn(data) {
        this.showupdateAlarmMask = data
      },
      editDialog() {
        this.dialogSafeEdit = true
        this.editSafeTime = []
        this.editAddTime()
      },
      editAddTime() {
        if (this.editSafeTime.length < 9) {
          this.editSafeTime.push({})
        }
      },
      editDeleteRow(index) {
        if (this.editSafeTime.length > 1) {
          this.editSafeTime.splice(index, 1)
        }
      },
      open3(index, rows) {
        var deleteid = []
        deleteid.push(rows[index].oid)
        this.$confirm('确认是否删除策略？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('未完成')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      showUpdateMask(index, row) {
        console.log(index)
        if (this.enabledState.disabled === true) {
          this.enabledState.disabled = false
          this.enabledState.enabled = true
        } else {
          this.enabledState.disabled = true
          this.enabledState.enabled = false
        }
      }
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss">
.alarmSearch{
  width: 100%;
  height: 50px;
  /*border: 1px solid;*/
}
  .alarmTableList{
    width: 100%;
    height: 500px;
    overflow: auto;
  }
.footerPage{
  float: right;
  right:20px;
  position: relative;
}
.tableIcon {
  padding: 0px;
  font-size: 20px;
  font-weight: 500;
  color: #25B7C8;
}
.segmentingLine {
  font-size: 20px;
}
</style>
